
<include file="./Tpl/default/Index/header.html"/>
<css file="__PUBLIC__/index/css/relay.css"/>
<script>
    var url = "__URL__";
    var app = "__APP__";
    $(function(){
        $('.box').hover(function(){
            var index = $('.box').index(this);
            $('.box .pin img').eq(index).css('opacity','0.5');
            $('.box .check').eq(index).show();
        },function(){
            var index = $('.box').index(this);
            if($('.box').eq(index).attr('aa')!='chec'){
                $('.box .pin img').eq(index).css('opacity',1);
                $('.box .check').eq(index).hide();
            }
        })
        $('.box').toggle(function(){
            var index = $('.box').index(this);
            $(this).attr('aa','chec')
            $('.box .pin img').eq(index).css('opacity','0.5');
            $('.box .check').eq(index).addClass('checked').show();
            if(('.checked').length>0){
                $('.continue').addClass('checking');
            }
        },function(){
            var index = $('.box').index(this);
            $(this).attr('aa','')
            $('.box .pin img').eq(index).css('opacity','0.5');
            $('.box .check').eq(index).removeClass('checked');
            if($('.checked').length==0){
                $('.continue').removeClass('checking');
            }
        })
        $('.checking').live('click',function(){
            var str = '';
           $('.checked').each(function(index,check){
               str += $(check).parent().attr('name')+'-';
           })
           $.post(url+'/addsort',{'num':str},function(data){
                if(data.num==1){
                    location.href=app+'/?m=Complete&a=index';
                }
           },'json')
        })
    })
</script>
<div class="middle">
    <div id="content">
        <h1>选择你感兴趣的内容，花瓣会精选一些不错的画板给你，快试试吧〜</h1>
        <volist name="st" id="n">
            <div class="box" name="{$n.sid}">
                <div class="pin">
                    <img src="__PUBLIC__/index/images/sort/{$n.thump}.png" />
                </div>
                <div class="name">{$n.type}</div>
                <span class="check"></span>
            </div>
        </volist>
    </div>
    <a href="javascript:;" class="continue">继续</a>
</div>
</body>
</html>
